<template>
  <view class="page">
    <!-- 头部搜索 start -->
    <view class="header-wrap" >
      <view class="cu-bar search " :style="[{paddingRight:PR +'px','height':CustomBar+'px',paddingTop: StatusBar + 'px'}]">
        <view class="action" @click="back"><text class="cuIcon-back text-333"></text></view>
        <view class="search-form round">
          <text class="cuIcon-search"></text>
          <input v-model="keyword"  :adjust-position="false" type="text" @confirm="searchConfirm"  :placeholder="i18n['请输入商品关键字']" confirm-type="search" />
          <text v-if="keyword.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="handleClear"></text>
        </view>
        <!-- #ifndef MP-WEIXIN -->
        <view class=" text-999 text-sm flex justify-center align-center classification" @click="classification" v-if="is_hidden != '1'">
          <image src="../../static/classification.png"></image>
          <view>{{i18n['分类']}}</view>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <!-- <view :style="{ height: CustomBar - 1 + 'px' }"></view> -->
    <!-- 头部搜索 end -->
    <!-- 筛选组件 start -->
    <screen @change="screenChange" @changeBlock="changeBlock" ref="screen" :show="false"></screen>
    <!-- 筛选组件 end -->
    <!-- loadding start -->
    <loading v-if="isInit"></loading>
    <!-- loadding end -->
    <!-- 店铺商品 start -->
    <block v-if="!isInit">
      <block>
        <view class="screen-wrap flex justify-start flex-wrap">
          <block v-for="(item,index) in goodsList" :key="index">
            <view class="screen-item" @click="navToDetail(item)">
              <fu-block :info="item"></fu-block>
            </view>
          </block>
        </view>
      </block>
    <!--  <block v-else>
        <view class="row-wrap">
          <block v-for="(item,index) in goodsList" :key="index">
            <view class="row-item"  @click="navToDetail(item)">
              <fuRows :item="item"></fuRows>
            </view>
          </block>
        </view>
      </block> -->
      <!-- 无数据 start -->
      <fu-empty-ui v-if="isData" emptyImage='goods'></fu-empty-ui>
      <!-- 无数据 end -->
      <!-- 没有更多数据 start -->
      <uni-load-more v-if="goodsList.length > 0" :status="status"></uni-load-more>
      <!-- 没有更多数据 end -->
    </block>
    <!-- 店铺商品 end -->

    <!-- 返回顶部 start -->
    <backTop v-if="isShowTop"></backTop>
    <!-- 返回顶部 end -->
  </view>
</template>

<script>
  import screen from '../../components/fu-screen/fu-screen.vue';
  // 引入商品信息块组件
  import fuBlock from '../../components/fu-block/fu-block.vue';
  // 引入商品信息行组件
  import fuRows from '../../components/fu-rows/fu-rows.vue';
  // 引入返回顶部组件
  import backTop from '../../components/fu-top/fu-top.vue';
  // 引入loading组件
  import loading from '../../components/fu-loading/fu-loading.vue';
export default {
  components:{screen,fuBlock,fuRows,backTop,loading},
  data() {
    return {
      isBlock:true,//是否显示九宫格样式
      goodsList:[],//商品数据
      // 商品数据
      sort:1,//1综合排序，2销量，3价格
      order:'asc',//升序 asc 或者 倒序 desc 默认升序
      keyword:'',//搜索关键字
      is_new:0,//0不搜新品 1搜新品
      page:1,//当前页数
      list_rows:10,//每页条数
      status:'more',//数据加载状态
      isData:false,//无数据状态
      isShowTop:false,//是否显示置顶按钮
      isInit:false,//数据初始化
      goods_shop_category:'',
	  is_hidden: '1'
    };
  },
  computed:{
    // 右侧padding值 兼容小程序
    PR(){
    	let pr = uni.upx2px(32);
    	let w = 0;
    	// #ifdef MP-WEIXIN
    	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    	w = menuButtonInfo.width;
    	// #endif
    	console.log(pr,w)
    	return pr + w;
    }
  },
  created() {

  },
  onLoad(options) {
    console.log(options, '搜索参数');
    /***
     * @keyWords 关键词
     * @cid 分类id
     **/
    // const { keyWords = '', cid = '' } = options;
    // if (keyWords) {
    //   this.keywords = keyWords;
    // }
    // if (cid != '') {
    //   this.cid = cid;
    // }
    // this.handleSearch(); // 搜索方法
  },
  destroyed(){
    if(uni.getStorageSync('searchContent')){
       uni.removeStorageSync('searchContent');
    }
  },
  mounted() {
    this.goods_shop_category =uni.getStorageSync('searchContent') || ''
    this.getGoodsGetGoodsList(true);
	this.is_hidden = global.thirdConfig ? global.thirdConfig.is_hidden : 1;
  },
  methods: {
    /**
     * @description 返回
     */
    back(){
      uni.navigateBack({
        delta:1
      })
    },
    /**
     * @description 点击分类跳转分类页
     */
    classification(){
      this.$emit('barChange','cate')
    },
    /**
     * @description 筛选组件返回数据
     * @param {Boolean} data 是否显示九宫格样式
     */
    changeBlock(data){
      this.isBlock = data;
    },
   /**
    * @description 筛选组件返回数据
    * @param {Object} data 组件返回参数
    */
   screenChange(data){
     console.log(data);
     this.sort = data.sort;
     this.order = data.order;
     this.is_new = data.is_new;
     this.page = 1;
     this.status = 'more';
     this.getGoodsGetGoodsList(true);
   },
   /**
    * @event
    * @description 跳转到商品详情
    * @param {Object} item - 商品信息
    */
   navToDetail(item) {
     this.$urouter.navigateTo({
       url: '/pages/goods/goodsdetail/goods-detail/index',
       params: {
         sku_id: item.sku_id || 0,
         goods_id: item.id,
       }
     })
   },
   /**
    * @description 切换搜索条件
    * @param {Object} e input框事件源
    */
   searchConfirm(e) {
     if (e && e.detail.value.trim() == '') return;
     // 每次搜索时重置已选择的筛选
     if(this.$refs.screen){
       this.$refs.screen.reset();
       this.sort = 1;//1综合 2销量 3价格
       this.order = 'asc';//升序 asc 或者 倒序 desc 默认升序
       this.is_new = 0;//是否是新品
     }
     this.page = 1;
     this.status = 'more';
     this.getGoodsGetGoodsList(true);
   },
   /**
    * @description 清除关键字
    */
   handleClear() {
     this.keyword = '';
      this.page = 1;
     this.status = 'more';
     this.getGoodsGetGoodsList(true);
   },
   /**
    * @description 获取商品数据
    */
   getGoodsGetGoodsList(isInit = false){
     this.isData = false;
     if(this.status == 'noMore') return;
     // this.status = 'loading';
     if(isInit){
       this.isInit = true;
     }
     this.$api
       .post(global.apiUrls.getGoodsGetGoodsList, {
         partner_id: this.$store.state.partner_id ,//店铺id,
         sort:this.sort,//1综合排序，2销量，3价格
         order:this.order,//升序 asc 或者 倒序 desc 默认升序
         keyword:this.keyword,//搜索关键字
         goods_type:this.is_new,//0不搜新品 1搜新品
         page:this.page,
         list_rows:this.list_rows,
         goods_shop_category:this.goods_shop_category,//搜索商家分类id
       })
       .then(res => {
         console.log('商品信息',res);
         if (res.data.code == 1) {
           if (this.page == 1) this.goodsList = [];
           this.goodsList.push(...res.data.data.data);
           let num = this.list_rows;
           if (this.goodsList.length < res.data.data.total) {
             this.status = 'more';
             this.page++;
           } else {
             this.status = 'noMore';
           }
           if(this.goodsList.length == 0){
             this.isData = true;
           }

           uni.stopPullDownRefresh();
         }else{
           this.isData = true;
           this.status = 'more';
           uni.stopPullDownRefresh();
         }
         if(isInit){
           this.isInit = false;
         }
       })
       .catch(err => {
         if(isInit){
           this.isInit = false;
         }
         this.isData = true;
         this.status = 'more';
         uni.stopPullDownRefresh();
         console.log(err);
       });
       this.$forceUpdate();
   },
   /**
    * @description 刷新
    */
   refresh(){
     // 每次刷新时重置已选择的筛选
     if(this.$refs.screen){
       this.$refs.screen.reset();
       this.sort = 1;//1综合 2销量 3价格
       this.order = 'asc';//升序 asc 或者 倒序 desc 默认升序
       this.is_new = 0;//是否是新品
     }
   	this.page = 1;
   	this.status = 'more';
   	this.getGoodsGetGoodsList();
   },
   /**
    * @description 滚动设置
    */
   scrollShow(type){
     this.isShowTop = type;
   }

  }
};
</script>

<style scoped lang="scss">
  .page{
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  }
  // 头部 start
.header-wrap {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 9999999;
  background: #ffffff;
  .classification {
    image {
      width: 38rpx;
      height: 38rpx;
      margin-right: 8rpx;
    }
  }
}
// 头部 end
// 商品 start
  // 块 start
  .screen-wrap{
    padding: 24rpx;
    box-sizing: border-box;
    .screen-item{
      width: 100%;
      margin-bottom: 20rpx;
      &:nth-child(odd){
        padding-right: 8rpx;
      }
      &:nth-child(even){
        padding-left: 8rpx;
      }
    }
  }
  // 块 end
  // 行 start
  .row-wrap{
    padding: 24rpx;
    box-sizing: border-box;
    .row-item{
      width: 100%;
      margin-bottom: 20rpx;
    }
  }
  // 行 end
  // 商品 end
</style>
